<template>
    <div class="divCommomStyle">
      <div class="content">
        <div class="title">
          <span>2019-12-20重庆市移动公司</span>
        </div>
        <div class="circular2">
          <div class="Chart2">
            <div id="chart2" :style="{width: '100%', height: '100%'}"></div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      chart2: null
    }
  },
  mounted () {
    this.initchart2()
  },
  activated () {
    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
    if (this.chart2) {
      this.chart2.resize()
    }
  },
  methods: {
    initchart2 () {
      let option = {
        grid: {
          top: '15%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: ['重庆',
            '渝中',
            '渝北',
            '巴南',
            '大渡口',
            '江北',
            '沙坪坝',
            '北碚',
            '涪陵',
            '江津'
          ],
          axisLine: {
            show: true,
            lineStyle: {
              color: '#063374',
              width: 1,
              type: 'solid'
            }
          },
          axisTick: {
            show: true
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#00c7ff'
            }
          }
        }],
        yAxis: [{
          type: 'value',
          axisLabel: {
            formatter: '{value} %'
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#00c7ff',
              width: 1,
              type: 'solid'
            }
          },
          axisTick: {
            show: true
          },
          splitLine: {
            lineStyle: {
              color: '#063374'
            }
          }
        }],
        series: [{
          type: 'bar',
          data: [20, 50, 80, 58, 83, 68, 57, 80, 42, 66],
          itemStyle: {
            normal: {
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#00fcae'
              }, {
                offset: 1,
                color: '#006388'
              }]),
              opacity: 1
            }
          }
        }]
      }
      this.chart2 = this.$echarts.init(document.getElementById('chart2'))
      this.chart2.setOption(option)
      window.addEventListener('resize', () => {
        this.chart2.resize()
      })
    }
  }
}
</script>

<style scoped>
.divCommomStyle{
  display: flex;
  justify-content: center;
  align-items: center;
}
.divCommomStyle .content{
  display: flex;
  flex-flow: column;
}
.divCommomStyle .title{
  height: 30px;
  text-align: left;
  font-size: 14px;
  color: #29adf1;
}
.divCommomStyle .circular2{
  width: 100%;
  height: 100%;
}
.Chart2{
  width: 100%;
  height: calc(100% - 10PX);
}
</style>
